<div class="wiki-edit-control-btn">
  <button id="toggle-btn" class="btn btn-secondary btn-sm text-sm">
    Preview
  </button>
  <div class="wiki-edit-control-btn flex">
    <div class="btn btn-secondary discard-edit-btn btn-sm" data-new="false">
      Discard
    </div>
    <div class="btn-group">
      <div type="button" class="btn btn-group btn-primary save-wiki-page-btn btn-sm" data-wiki-button="saveWikiPage">
        Save
      </div>
      <div type="button" class="btn btn-primary btn-sm dropdown-toggle dropdown-toggle-split" data-toggle="dropdown"
        aria-haspopup="true" aria-expanded="false">
        <span class="sr-only">Toggle Dropdown</span>
      </div>
      <div class="dropdown-menu" aria-labelledby="saveDropdownMenuButton">
        <a href="#" class="dropdown-item text-sm" data-wiki-button="draftWikiPage">Draft</a>
      </div>
    </div>
  </div>
</div>

<div id="preview-container" class="markdown-preview"></div>
<div class="wiki-editor-container">
  <div class="wiki-title-container">
    <label class="text-sm">Title</label>
    <input type="text" class="form-control wiki-title-input" value="" placeholder="What's the Wiki Title?" />
  </div>
  <label class="text-sm">Content</label>
  <div class="editor-container">
    <div class="toolbar">
      <button data-mde-button="bold" title="Bold">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
          stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-bold">
          <path d="M6 12h9a4 4 0 0 1 0 8H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h7a4 4 0 0 1 0 8" />
        </svg>
      </button>
      <button data-mde-button="italic" title="Italic">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
          stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-italic">
          <line x1="19" x2="10" y1="4" y2="4" />
          <line x1="14" x2="5" y1="20" y2="20" />
          <line x1="15" x2="9" y1="4" y2="20" />
        </svg>
      </button>
      <button data-mde-button="heading" title="Heading">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
          stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-heading">
          <path d="M6 12h12" />
          <path d="M6 20V4" />
          <path d="M18 20V4" />
        </svg>
      </button>
      <button data-mde-button="quote" title="Quote">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
          stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-quote">
          <path
            d="M16 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z" />
          <path
            d="M5 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z" />
        </svg>
      </button>
      <button data-mde-button="olist" title="Ordered List">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
          stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-list-ordered">
          <path d="M10 12h11" />
          <path d="M10 18h11" />
          <path d="M10 6h11" />
          <path d="M4 10h2" />
          <path d="M4 6h1v4" />
          <path d="M6 18H4c0-1 2-2 2-3s-1-1.5-2-1" />
        </svg>
      </button>
      <button data-mde-button="ulist" title="Unordered List">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
          stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-list">
          <path d="M3 12h.01" />
          <path d="M3 18h.01" />
          <path d="M3 6h.01" />
          <path d="M8 12h13" />
          <path d="M8 18h13" />
          <path d="M8 6h13" />
        </svg>
      </button>
      <button data-mde-button="link" title="Link">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
          stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-link">
          <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" />
          <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" />
        </svg>
      </button>
      <button data-mde-button="image" title="Image">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
          stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-image">
          <rect width="18" height="18" x="3" y="3" rx="2" ry="2" />
          <circle cx="9" cy="9" r="2" />
          <path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21" />
        </svg>
      </button>
      <button data-mde-button="table" title="Table">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
          stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-table">
          <path d="M12 3v18" />
          <rect width="18" height="18" x="3" y="3" rx="2" />
          <path d="M3 9h18" />
          <path d="M3 15h18" />
        </svg>
      </button>
      <button data-mde-button="disclosure" title="Disclosure">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
          stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
          class="lucide lucide-list-collapse">
          <path d="m3 10 2.5-2.5L3 5" />
          <path d="m3 19 2.5-2.5L3 14" />
          <path d="M10 6h11" />
          <path d="M10 12h11" />
          <path d="M10 18h11" />
        </svg>
      </button>
    </div>
    <div id="wiki-editor"></div>
  </div>
</div>